<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<base th:href="@{/}">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Toyqo - Kids Store Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="shortcut icon" th:href="@{assets/images/Shop.ico}">

    <!-- Vendor CSS (Icon Font) -->

    <!--
<link rel="stylesheet" href="assets/css/vendor/fontawesome.min.css" />
<link rel="stylesheet" href="assets/css/vendor/pe-icon-7-stroke.min.css" />
-->


    <!-- Plugins CSS (All Plugins Files) -->


    <!--
<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/plugins/animate.min.css" />
<link rel="stylesheet" href="assets/css/plugins/lightgallery.min.css" />
<link rel="stylesheet" href="assets/css/plugins/aos.min.css" />
<link rel="stylesheet" href="assets/css/plugins/nice-select.min.css" />
-->


    <!-- Main Style CSS -->
    <!-- <link rel="stylesheet" href="assets/css/style.css" /> -->


    <!-- Use the minified version files listed below for better performance and remove the files listed above -->


    <link rel="stylesheet" th:href="@{/assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}">





</head>

<body>

<div th:include="head :: headname"></div>

<!-- Breadcrumb Section Start -->
<div class="section">

    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb-area bg-primary">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li>
                        <a th:href="@{/goods/index}"><i class="fa fa-home"></i> </a>
                    </li>
                    <li class="active">结算页</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

</div>
<!-- Breadcrumb Section End -->

<!-- Checkout Section Start -->
<div class="section section-margin">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- Coupon Accordion Start -->
                <div class="coupon-accordion">

                    <!-- Title Start -->
                    <h3 class="title">还没有登录？<span id="showlogin">点击这里登录</span></h3>
                    <!-- Title End -->

                    <!-- Checkout Login Start -->
                    <div id="checkout-login" class="coupon-content">
                        <div class="coupon-info">
                            <!--                                <p class="coupon-text mb-2">Quisque gravida turpis sit amet nulla posuere lacinia. Cras sed est sit amet ipsum luctus.</p>-->

                            <!-- Form Start -->
                            <form action="#">
                                <!-- Input Email Start -->
                                <p class="form-row-first">
                                    <label>用户名<span class="required">*</span></label>
                                    <input type="text">
                                </p>
                                <!-- Input Email End -->

                                <!-- Input Password Start -->
                                <p class="form-row-last">
                                    <label>密码 <span class="required">*</span></label>
                                    <input type="password">
                                </p>
                                <!-- Input Password End -->

                                <!-- Remember Password Start -->
                                <p class="form-row mb-2">
                                    <input type="checkbox" id="remember_me">
                                    <label for="remember_me" class="checkbox-label">记住该用户</label>
                                </p>
                                <!-- Remember Password End -->

                                <!-- Lost Password Start -->
                                <p class="lost-password"><a href="#">密码忘记？</a></p>
                                <!-- Lost Password End -->

                            </form>
                            <!-- Form End -->

                        </div>
                    </div>
                    <!-- Checkout Login End -->

                    <!-- Title Start -->
                    <h3 class="title">有优惠卷？<span id="showcoupon">点击这里使用优惠卷</span></h3>
                    <!-- Title End -->

                    <!-- Checkout Coupon Start -->
                    <div id="checkout_coupon" class="coupon-checkout-content">
                        <div class="coupon-info">
                            <form action="#">
                                <p class="checkout-coupon d-flex">
                                    <input placeholder="优惠卷码" type="text">
                                    <input class="btn btn-primary btn-hover-secondary rounded-0" value="使用优惠券" type="submit">
                                </p>
                            </form>
                        </div>
                    </div>
                    <!-- Checkout Coupon End -->

                </div>
                <!-- Coupon Accordion End -->
            </div>
        </div>
        <div class="row mb-n4">
            <div class="col-lg-6 col-12 mb-4">

                <!-- Checkbox Form Start -->
                <form action="#">
                    <div class="checkbox-form">

                        <!-- Checkbox Form Title Start -->
                        <h3 class="title">账单详情，请仔细核对</h3>
                        <!-- Checkbox Form Title End -->

                        <div class="row">

                            <!-- Select Country Name Start -->

                            <div class="col-md-12 mb-6">
                                <div class="checkout-form-list">
                                    <label>配送方式<span class="required">*</span></label>
                                    <input placeholder="" type="text" th:value="${orderList.deliveryCompany}" readonly>
                                </div>
                            </div>
                            <!-- Select Country Name End -->

                            <!-- First Name Input Start -->
                            <div class="col-md-6">
                                <div class="checkout-form-list">
                                    <label>收货人姓名<span class="required">*</span></label>
                                    <input placeholder="" type="text" th:value="${orderList.receiverName}">
                                </div>
                            </div>
                            <!-- First Name Input End -->

                            <!-- Last Name Input Start -->
                            <div class="col-md-6">
                                <div class="checkout-form-list">
                                    <label>联系方式<span class="required">*</span></label>
                                    <input placeholder="" type="text" th:value="${orderList.receiverPhone}">
                                </div>
                            </div>
                            <!-- Last Name Input End -->

                            <!-- Company Name Input Start -->
                            <div class="col-md-12">
                                <div class="checkout-form-list">
                                    <label>所在省市</label>
                                    <input placeholder="" type="text" th:value="${orderList.receiverProvince}+${orderList.receiverCity}">
                                </div>
                            </div>
                            <!-- Company Name Input End -->

                            <!-- Address Input Start -->
                            <div class="col-md-12">
                                <div class="checkout-form-list">
                                    <label>详细地址 <span class="required">*</span></label>
                                    <input placeholder="" type="text" th:value="${orderList.receiverRegion}">
                                </div>
                            </div>
                            <!-- Address Input End -->

                            <!-- Optional Text Input Start -->
                            <div class="col-md-12">
                                <div class="checkout-form-list">
                                    <input placeholder="" type="text" th:value="${orderList.receiverDetailAddress}">
                                </div>
                            </div>
                            <!-- Optional Text Input End -->

                            <!-- Town or City Name Input Start -->
                            <!--                                <div class="col-md-12">-->
                            <!--                                    <div class="checkout-form-list">-->
                            <!--                                        <label>Town / City <span class="required">*</span></label>-->
                            <!--                                        <input type="text">-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!-- Town or City Name Input End -->

                            <!-- State or Country Input Start -->
                            <!--                                <div class="col-md-6">-->
                            <!--                                    <div class="checkout-form-list">-->
                            <!--                                        <label>State / County <span class="required">*</span></label>-->
                            <!--                                        <input placeholder="" type="text">-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!-- State or Country Input End -->

                            <!-- Postcode or Zip Input Start -->
                            <!--                                <div class="col-md-6">-->
                            <!--                                    <div class="checkout-form-list">-->
                            <!--                                        <label>Postcode / Zip <span class="required">*</span></label>-->
                            <!--                                        <input placeholder="" type="text">-->
                            <!--                                    </div>-->
                            <!--                                </div>-->
                            <!-- Postcode or Zip Input End -->

                            <!-- Email Address Input Start -->
                            <div class="col-md-6">
                                <div class="checkout-form-list">
                                    <label>订单编号<span class="required">*</span></label>
                                    <input  type="text" th:value="${orderList.orderSn}">
                                </div>
                            </div>
                            <!-- Email Address Input End -->

                            <!-- Phone Number Input Start -->
                            <div class="col-md-6">
                                <div class="checkout-form-list">
                                    <label>邮编<span class="required">*</span></label>
                                    <input type="text"  th:value="${orderList.receiverPostCode}">
                                </div>
                            </div>
                            <!-- Phone Number Input End -->

                            <!-- Checkout Form List checkbox Start -->

                            <!-- Checkout Form List checkbox End -->

                        </div>

                        <!-- Different Address Start -->
                        <!-- Different Address End -->
                    </div>
                </form>
                <!-- Checkbox Form End -->

            </div>

            <div class="col-lg-6 col-12 mb-4">

                <!-- Your Order Area Start -->
                <div class="your-order-area border">

                    <!-- Title Start -->
                    <h3 class="title">我的订单</h3>
                    <!-- Title End -->

                    <!-- Your Order Table Start -->
                    <div class="your-order-table table-responsive">
                        <table class="table">

                            <!-- Table Head Start -->
                            <thead>
                            <tr class="cart-product-head">
                                <th class="cart-product-name text-start">我的商品</th>
                                <th class="cart-product-total text-end">总计</th>
                            </tr>
                            </thead>
                            <!-- Table Head End -->

                            <!-- Table Body Start -->
                            <tbody>

                            <tr class="cart_item" th:each="o : ${omsCartItemList}">
                                <td class="cart-product-name text-start ps-0" th:text="${o.productName}"></td>
                                <td class="cart-product-total text-end pe-0" th:text="${o.productPrice}"></td>
                            </tr>
                            </tbody>
                            <!-- Table Body End -->

                            <!-- Table Footer Start -->
                            <tfoot>
                            <tr class="order-total">
                                <th class="text-start ps-0">订单总计</th>
                                <td class="text-end pe-0" th:text="${count}"><strong><span class="amount"></span></strong></td>
                            </tr>
                            </tfoot>
                            <!-- Table Footer End -->

                        </table>
                    </div>
                    <!-- Your Order Table End -->

                    <!-- Payment Accordion Order Button Start -->
                    <div class="payment-accordion-order-button">
                        <div class="payment-accordion">
                            <div class="single-payment">
                                <h5 class="panel-title mb-3">
                                    <a class="collapse-off" data-bs-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                                        银行转账
                                    </a>
                                </h5>
                                <div class="collapse show" id="collapseExample">
                                    <div class="card card-body rounded-0">
                                        <p>把您的付款直接存入我们的银行账户。请使用您的订单ID作为付款参考。您的订单要到我们账户上的资金结清后才能发货。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="single-payment">
                                <h5 class="panel-title mb-3">
                                    <a class="collapse-off" data-bs-toggle="collapse" href="#collapseExample-2" aria-expanded="false" aria-controls="collapseExample-2">
                                        网上支付
                                    </a>
                                </h5>
                                <div class="collapse" id="collapseExample-2">
                                    <div class="card card-body rounded-0">
                                        <p>把您的付款直接存入我们的银行账户。请使用您的订单ID作为付款参考。您的订单要到我们账户上的资金结清后才能发货。</p>
                                    </div>
                                </div>
                            </div>
                            <div class="single-payment">
                                <h5 class="panel-title mb-3">
                                    <a class="collapse-off" data-bs-toggle="collapse" href="#collapseExample-3" aria-expanded="false" aria-controls="collapseExample-3">
                                        信用卡
                                    </a>
                                </h5>
                                <div class="collapse" id="collapseExample-3">
                                    <div class="card card-body rounded-0">
                                        <p>把您的付款直接存入我们的银行账户。请使用您的订单ID作为付款参考。您的订单要到我们账户上的资金结清后才能发货。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="order-button-payment">
                            <button class="btn btn-primary btn-hover-secondary rounded-0 w-100" onclick="subPay(this)" th:value="${orderList.id}">提交付款</button>
                            <button class="btn btn-default btn-hover-secondary rounded-0 w-100" onclick="subNoPay()">暂不付款</button>
                        </div>
                    </div>
                    <!-- Payment Accordion Order Button End -->
                </div>
                <!-- Your Order Area End -->
            </div>
        </div>
    </div>
</div>
<!-- Checkout Section End -->

<!-- Footer Section Start -->
<div th:replace="footer :: footerS"></div>
<!-- Footer Section End -->


<a href="#" class="scroll-top show" id="scroll-top">
    <i class="arrow-top pe-7s-angle-up-circle"></i>
    <i class="arrow-bottom pe-7s-angle-up-circle"></i>
</a>

<!-- Mobile Menu Start -->
<div class="mobile-menu-wrapper">
    <div class="offcanvas-overlay"></div>

    <!-- Mobile Menu Inner Start -->
    <div class="mobile-menu-inner">

        <!-- Button Close Start -->
        <div class="offcanvas-btn-close">
            <i class="pe-7s-close"></i>
        </div>
        <!-- Button Close End -->

        <!-- Mobile Menu Inner Wrapper Start -->
        <div class="mobile-menu-inner-wrapper">
            <!-- Mobile Menu Search Box Start -->
            <div class="search-box-offcanvas">
                <form>
                    <input class="search-input-offcanvas" type="text" placeholder="Search product...">
                    <button class="search-btn"><i class="pe-7s-search"></i></button>
                </form>
            </div>
            <!-- Mobile Menu Search Box End -->

            <!-- Mobile Menu Start -->
            <div class="mobile-navigation">
                <nav>
                    <ul class="mobile-menu">
                        <li class="has-children">
                            <a href="#">Home <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown">
                                <li><a href="index.html">Home One</a></li>
                                <li><a href="index-2.html">Home Two</a></li>
                                <li><a href="index-3.html">Home Three</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Shop <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown">
                                <li><a href="shop.html">Shop Grid</a></li>
                                <li><a href="shop-left-sidebar.html">Shop Left Sidebar</a></li>
                                <li><a href="shop-right-sidebar.html">Shop Right Sidebar</a></li>
                                <li><a href="shop-list-fullwidth.html">Shop List Fullwidth</a></li>
                                <li><a href="shop-list-left-sidebar.html">Shop List Left Sidebar</a></li>
                                <li><a href="shop-list-right-sidebar.html">Shop List Right Sidebar</a></li>
                                <li><a href="wishlist.html">Wishlist</a></li>
                                <li><a href="cart.html">Shopping Cart</a></li>
                                <li><a href="checkout.html">Checkout</a></li>
                                <li><a href="compare.html">Compare</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Product <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown">
                                <li><a href="single-product.html">Single Product</a></li>
                                <li><a href="single-product-sale.html">Single Product Sale</a></li>
                                <li><a href="single-product-group.html">Single Product Group</a></li>
                                <li><a href="single-product-normal.html">Single Product Normal</a></li>
                                <li><a href="single-product-affiliate.html">Single Product Affiliate</a></li>
                                <li><a href="single-product-slider.html">Single Product Slider</a></li>
                                <li><a href="single-product-gallery-left.html">Gallery Left</a></li>
                                <li><a href="single-product-gallery-right.html">Gallery Right</a></li>
                                <li><a href="single-product-tab-style-left.html">Tab Style Left</a></li>
                                <li><a href="single-product-tab-style-right.html">Tab Style Right</a></li>
                                <li><a href="single-product-sticky-left.html">Sticky Left</a></li>
                                <li><a href="single-product-sticky-right.html">Sticky Right</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown">
                                <li><a href="about.html">About Us</a></li>
                                <li><a href="contact.html">Contact</a></li>
                                <li><a href="faq.html">Faq</a></li>
                                <li><a href="error-404.html">Error 404</a></li>
                                <li><a href="my-account.html">My Account</a></li>
                                <li><a href="login.html">Loging | Register</a></li>
                            </ul>
                        </li>
                        <li class="has-children">
                            <a href="#">Blog <i class="fa fa-angle-down" aria-hidden="true"></i></a>
                            <ul class="dropdown">
                                <li><a href="blog.html">Blog</a></li>
                                <li><a href="blog-left-sidebar.html">Blog Left Sidebar</a></li>
                                <li><a href="blog-right-sidebar.html">Blog Right Sidebar</a></li>
                                <li><a href="blog-details.html">Blog Details</a></li>
                                <li><a href="blog-details-sidebar.html">Blog Details Sidebar</a></li>
                            </ul>
                        </li>
                        <li><a href="about.html">About</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <!-- Mobile Menu End -->

            <!-- Language, Currency & Link Start -->
            <div class="offcanvas-lag-curr mb-6">
                <div class="header-top-lan-curr-link">
                    <div class="header-top-lan dropdown">
                        <h4 class="title">Language:</h4>
                        <button class="dropdown-toggle" data-bs-toggle="dropdown">English <i class="fa fa-angle-down"></i></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="dropdown-item" href="#">English</a></li>
                            <li><a class="dropdown-item" href="#">Japanese</a></li>
                            <li><a class="dropdown-item" href="#">Arabic</a></li>
                            <li><a class="dropdown-item" href="#">Romanian</a></li>
                        </ul>
                    </div>
                    <div class="header-top-curr dropdown">
                        <h4 class="title">Currency:</h4>
                        <button class="dropdown-toggle" data-bs-toggle="dropdown">USD <i class="fa fa-angle-down"></i></button>
                        <ul class="dropdown-menu dropdown-menu-right">
                            <li><a class="dropdown-item" href="#">USD</a></li>
                            <li><a class="dropdown-item" href="#">Pound</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- Language, Currency & Link End -->

            <!-- Contact Links/Social Links Start -->
            <div class="mt-auto bottom-0">

                <!-- Contact Links Start -->
                <ul class="contact-links">
                    <li><i class="fa fa-phone"></i><a href="#"> +012 3456 789</a></li>
                    <li><i class="fa fa-envelope-o"></i><a href="#"> info@example.com</a></li>
                    <li><i class="fa fa-clock-o"></i> <span>Monday - Sunday 9.00 - 18.00</span> </li>
                </ul>
                <!-- Contact Links End -->

                <!-- Social Widget Start -->
                <div class="widget-social">
                    <a title="Facebook" href="#"><i class="fa fa-facebook-f"></i></a>
                    <a title="Twitter" href="#"><i class="fa fa-twitter"></i></a>
                    <a title="Linkedin" href="#"><i class="fa fa-linkedin"></i></a>
                    <a title="Youtube" href="#"><i class="fa fa-youtube"></i></a>
                    <a title="Vimeo" href="#"><i class="fa fa-vimeo"></i></a>
                </div>
                <!-- Social Widget Ende -->
            </div>
            <!-- Contact Links/Social Links End -->
        </div>
        <!-- Mobile Menu Inner Wrapper End -->

    </div>
    <!-- Mobile Menu Inner End -->
</div>
<!-- Mobile Menu End -->


<script th:src="@{assets/js/vendor.min.js}"></script>
<script th:src="@{assets/js/plugins.min.js}"></script>

<!--Main JS-->
<script th:src="@{/assets/js/main.js}"></script>
<script th:src="@{/assets/layui/layui.js}"></script>
<script th:src="@{/assets/js/jquery.js}"></script>
<script>

    function subPay(btn){
        alert("确认付款么")
        let id = $(btn).val()
        location.href = "/order/checkout/paySuccess"
    }

    function subNoPay(){
        let a1 = $("<a>")
        a1[0].href ="/order/obligationUpdateStatus"
        a1[0].click();
        // location.href = "/order/checkout/obligationUpdateStatus"
    }
</script>
</body>

</html>